<ui:composition template="/WEB-INF/template_page.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:b="http://bootsfaces.net/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core">
	
	<ui:define name="custom_css">
		<link href="#{request.contextPath}/css/profile.css" rel="stylesheet" />
		<link href="#{request.contextPath}/css/eventprofile.css" rel="stylesheet" />
	</ui:define>

	<ui:define name="title">
        MeteoCal - #{userBean.name}
    </ui:define>

	<ui:define name="content">
		<div class="col-md-10 col-md-offset-1">
			<div class="col-md-4">
				<!-- Here goes the user info  -->
				<div class="row" align="center">
					<img class="profile-image img-circle" src="#{request.contextPath}#{userBean.avatar}" />
				</div>
	
				<br/>
				<div class="panel panel-info">
					<div class="panel-heading">
						<h3 class="panel-title" align="center">#{userBean.name}</h3>
					</div>
					<div class="panel-body">
						<table class="table table-user-information" id="display">
							<tbody>
								<tr>
									<td>Email</td>
									<td><a href="mailto:info@support.com">#{userBean.email}</a></td>
								</tr>
	
								<tr>
									<td>Password</td>
									<td>********</td>
								</tr>
								<tr>
									<td>Calendar</td>
									<td>#{userBean.visibilityCalendar}</td>
								</tr>
	
							</tbody>
						</table>
					</div>
				</div>
				<div align="center">						
					<h:form>
						<b:commandButton class="btn btn-lg btn-success" id="submit" value="Mark all as read" action="#{userBean.markAsRead()}" ajax="false" update="@all" />
					</h:form>
				</div>
			</div>
			<div class="col-md-8">
				<c:forEach items="#{userBean.notifications}" var="t">
					<div class="modals">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<h3 class="modal-title">
										<c:if test="#{!t.read}">
											[UNREAD] 
										</c:if>
										
										<c:if test="#{t['class'].simpleName == 'Invitation'}">
											Invitation @ <a href="#{request.contextPath}/user/event.xhtml?event=#{t.event.id}"><h:outputText value="#{t.event.name}" /></a>
										</c:if>
										<c:if test="#{t['class'].simpleName == 'BadWeather'}">
											Bad Weather @ <a href="#{request.contextPath}/user/event.xhtml?event=#{t.event.id}"><h:outputText value="#{t.event.name}" /></a>
										</c:if>
									</h3>
								</div>
								<div class="row">
									<div class="modal-body col-md-offset-1 col-md-10">
										<c:if test="#{t['class'].simpleName == 'Invitation'}">
											<p>
												City : <h:outputText value="#{t.event.location}" />
											</p>
											<p>
												Date : <h:outputText value="#{t.event.day}/#{t.event.month}/#{t.event.year}" />
											</p>
											<p>
												Time : <h:outputText value="#{t.event.hour}:#{t.event.minute}" />
											</p>
										</c:if>
										
										<c:if test="#{t['class'].simpleName == 'BadWeather'}">
											<p>
												Proposition : <h:outputText value="#{t.propositionString}" />
											</p>
										</c:if>
									</div>
								</div>
								<div class="modal-footer">
									<c:if test="#{!t.read}">
										<div style="float:left;">		
											<h:form>
												<b:commandButton class="btn btn-lg btn-primary" id="submitRead" value="Mark as read" action="#{notifBean.markAsRead(t)}" ajax="false" update="@all" />
											</h:form>
										</div>
									</c:if>
									
									<c:if test="#{t['class'].simpleName == 'Invitation'}">
										<c:if test="#{!t.answered}">
											<!-- <button type="button" class="btn btn-success">Accept</button> -->
											<h:form>
												<b:commandButton class="btn btn-lg btn-success" value="Accept" action="#{notifBean.acceptInvitation(t)}" ajax="false" update="@all" />
											</h:form>
											<!-- <button type="button" class="btn btn-warning" data-dismiss="modal">Decline</button> -->
											<h:form>
												<b:commandButton class="btn btn-lg btn-warning" value="Decline" action="#{notifBean.declineInvitation(t)}" ajax="false" update="@all" />
											</h:form>
										</c:if>
										<c:if test="#{t.answered}">
											<h:outputText value="#{t.answer ? 'Accepted' : 'Declined'}" />
										</c:if>
									</c:if>
									<c:if test="#{t['class'].simpleName == 'BadWeather'}">
										<c:if test="#{!t.answered}">
											<!-- <button type="button" class="btn btn-warning" data-dismiss="modal">reject suggestion</button> -->
											<h:form>
												<b:commandButton class="btn btn-lg btn-success" value="Change date" action="#{notifBean.acceptBadWeather(t)}" ajax="false" update="@all" />
											</h:form>
											<!-- <button type="button" class="btn btn-primary">change date</button> -->
											<h:form>
												<b:commandButton class="btn btn-lg btn-warning" value="Reject suggestion" action="#{notifBean.declineBadWeather(t)}" ajax="false" update="@all" />
											</h:form>
										</c:if>
										<c:if test="#{t.answered}">
											<h:outputText value="#{t.answer ? 'Accepted' : 'Rejected'}" />
										</c:if>
									</c:if>
								</div>
							</div>
						</div>
					</div>
				</c:forEach>
			</div>
		</div>
	</ui:define>
	
	<ui:define name="custom_js">
		<script src="#{request.contextPath}/js/profiletab.js"></script>
	</ui:define>
</ui:composition>